<template>
  <el-drawer
    :with-header="false"
    :visible="show"
    size="800px"
    @update:visible="updateVisable($event)"
  >
    <el-main>
      <el-button
        icon="el-icon-close"
        circle
        style="float: right"
        @click="updateVisable(false)"
      />
      <description
        title="角色菜单表详情"
        :items="roleMenuProps"
        :span="24"
        style="margin-top: 16px"
      />
    </el-main>
  </el-drawer>
</template>
<script>
import Description from "@/components/description";
import {Status} from "@/utils/constant/status";
import { parseTime } from "@/utils/common.js";

export default {
  components: {
    description: Description
  },
  props: {
    // 是否显示, 支持 sync
    show: {
      type: Boolean,
      default: false
    },
    roleMenu: {
      type: Object
    }
  },
  data() {
    return {};
  },
  computed: {
    roleMenuProps() {
      const result = [];
      if (this.roleMenu) {
        result.push({
          label: "角色ID",
          text: this.roleMenu["roleId"]
        });
        result.push({
          label: "菜单ID",
          text: this.roleMenu["menuId"]
        });
      }
      return result;
    }
  },
  methods: {
    updateVisable(v) {
      this.$emit("update:show", v);
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-drawer__body {
  overflow: scroll;
}
.batch-title {
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
}
.batch-block {
  margin-bottom: 16px;
}
</style>
